

<!--所有标签盒子-->


<template>
    <div class="tabs-box">

        <div class="tabs-container">
            <div class="tabs flex-center" ref="tabbox">
                <span v-show="tabList.length<1" style="color:#42b983">
                    暂无标签分类
                </span>
                <el-tag :type="getTabColor(index)"
                        effect="dark" v-for="(i,index) in tabList"
                       class="tab" @click="clickTab(i.tId,i.tName)"
                    :class="'tab-size'+(index%4+1)"
                >
                    {{i.tName}}
                </el-tag>

            </div>

            <div class="show-content">
<!--                    <ArticleCard :tab-id="tabsList.tId"></ArticleCard>-->
                <ArticleCard :list="articleList.list" :tab-name="tab.tName"></ArticleCard>
            </div>
        </div>

    </div>
</template>

<script>
    import {computed, reactive, ref} from "@vue/reactivity";
    import ArticleCard from "@/components/article/ArticleCard";
    import axios from 'axios'
    import {goToElement} from "@/assets/js/utils";
    export default {
        name: "MyTabs",
        components: {ArticleCard},
        props:{
            tabList:{
                type:Array,
                required:true
            }
        },
        setup(props){
            let tabbox=ref()
            let tab=reactive({
                tId:0,
                tName:"",
                tabs:props.tabList
            })
            let articleList=reactive({
                list:[]
            })

            async  function  getAxiosArticle(){
                return axios.get("/api/article/tab?id="+tab.tId).then(resp=>resp.data)
            }



            let clickTab=async function (tId,tName) {
                goToElement(tabbox,200)
                tab.tId=tId
                tab.tName=tName
                const data=await getAxiosArticle()
                if(data.code===200){
                    articleList.list=data.data.list
                }else{
                    alert(data.msg)
                }

            }

            const tabColorList=['success','info','warning','danger']
            let getTabColor=computed(()=>(i)=>{
                // const index=Math.ceil(Math.random()*tabColorList.length)
                // return tabColorList[index]
                return tabColorList[i%tabColorList.length]
            })


            return{
                getTabColor,
                tab,
                articleList,
                clickTab,
                tabbox
            }
        },

    }
</script>

<style scoped lang="less">

    @Content-width:80%;
    .tabs-box{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 100px;
        .tabs-container{
            width: 80%;


            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            .tabs{
                border-radius: 5px;

                width: @Content-width;
                height: 200px;
                min-height: 150px;
                background-color: #2c3e50;
                margin-bottom: 50px;

                flex-wrap: wrap;

                .tab{
                    font-size: 16px;
                    text-align: center;
                    margin-right: 20px;
                    transition: all 0.5s;

                }
                .tab:hover{
                    cursor: pointer;
                    color: var(--theme-color);
                    font-size: 20px;
                    /*box-shadow: white 1px 2px 1px;*/
                }
            }
            .show-content{
                width:@Content-width;

            }
        }
    }

    .tab-size1{

    }
    .tab-size2{

    }
    .tab-size3{

    }
    .tab-size4{

    }
    ::-webkit-scrollbar {/*滚动条整体样式*/
        width: 5px;     /*高宽分别对应横竖滚动条的尺寸*/
    }
    ::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background-color: #242b39;
    }
</style>